<template>
    <header>
        <div class="banxin tanxin header_box">
            <section>欢迎来到叩丁狼积分商城</section>
            <ul>
                <li class="avater_li">
                    <img width="26px" :src="userInfo.headImg" alt="">
                    用户名:{{ userInfo.nickName }}
                </li>
                <li>我的积分:{{ userInfo.coin }}</li>
                <li>获取积分</li>
                <li>叩丁狼官网</li>
                <li class="header_btn cart_btn" v-if="isLogin">
                    <img src="../assets/images/Shopping.png" alt="">
                    <span>购物车</span> <b>{{ cartTotal }}</b>
                </li>
                <li class="header_btn login_btn" v-else @click="goLogin">
                    登录
                </li>
                <li class="header_btn login_btn" @click="outLogin">
                    退出登录
                </li>
                <li class="header_btn login_btn" @click="jiebangWeiFn">
                    解绑微信
                </li>
            </ul>
        </div>
    </header>
</template>

<script>
import { getUserInfoApi, WeixinLoginApi, UnbindWechatPhoneApi } from "../request/api"
export default {
    data() {
        return {
            isLogin: false,
            // 用户信息
            userInfo: {
                // 用户头像
                headeImg: require("../assets/images/userImg.png"),
                nickName: "游客",
                // 积分数
                coin: "--",
            },
            cartTotal: 0

        }
    },
    methods: {
        jiebangWeiFn() {
            UnbindWechatPhoneApi().then((res) => {
                let toastObj = {
                    content: res.data.data,
                    icon: "danger",
                };
                this.$store.dispatch("AsncToast", toastObj);
            })
        },
        goLogin() {
            // 
            this.$store.commit('changeIsLogin', true)
        },
        outLogin() {
            localStorage.removeItem('x-auth-token')
            this.$router.go(0)
        },
        bindWatchFn() {
            // console.log(this.$route.query.code);
            let code = this.$route.query.code
            if (code) {
                WeixinLoginApi({ code }).then((res) => {

                    if (res.data.code === 0) {
                        console.log(res);
                        // 过期了 重新扫码
                        let toastObj = {
                            content: "登录成功",
                            icon: "success",
                        };
                        this.$store.dispatch("AsncToast", toastObj);
                        // 存储token
                        localStorage.setItem("x-auth-token", res.data["x-auth-token"]);
                        //  更新header组件
                        this.$emit("updateKeyFn");
                        // 删除地址栏的code
                        this.$router.push(this.$route.path)
                    } else if (res.data.code === 400) {
                        // 过期了 重新扫码
                        let toastObj = {
                            content: "页面过期 请重新扫描二维码",
                            icon: "danger",
                        };
                        this.$store.dispatch("AsncToast", toastObj);
                        // 重新打开登录框
                        this.$store.commit("changeIsLogin", true);
                    } else if (res.data.code === 407) {
                        // 需要手机号绑定微信
                        let toastObj = {
                            content: "请使用手机号绑定微信后再使用",
                            icon: "danger",
                        };
                        this.$store.dispatch("AsncToast", toastObj);
                        // 重新打开登录框
                        this.$store.commit("changeIsLogin", true);
                        // 存uuid -- 临时存储 因为这个东西 很快会过期
                        sessionStorage.setItem('uuid', res.data.uuid)
                    }
                })
            }
        }
    },
    created() {
        getUserInfoApi().then((res) => {
            console.log(res.data);
            if (res.data.code === 0) {
                let { userInfo, cartTotal } = res.data.data;
                this.userInfo = userInfo;
                this.isLogin = true;
                this.cartTotal = cartTotal
            }

        });
        // 调用监听函数
        this.bindWatchFn()
    },
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";


header {
    background: @black;
    height: 40px;
    color: #FFFEFE;
    font-size: 14px;

    .header_box {
        align-items: center;
        height: 40px;

        ul {
            display: flex;
            height: 40px;
            align-items: center;

            li {
                margin-right: 20px;
                cursor: pointer;

                &.header_btn {
                    width: 124px;
                    height: 40px;
                    background: #0A328E;
                }

                &.avater_li {
                    display: flex;
                    align-items: center;
                    height: 26px;

                    img {
                        border-radius: 50%;
                        margin-right: 8px;
                    }
                }

                &.cart_btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 124px;
                    height: 40px;
                    background: #0A328E;

                    span {
                        margin: 0 8px;
                    }

                    b {
                        width: 22px;
                        height: 22px;
                        background: @orange;
                        border-radius: 50%;
                        text-align: center;
                        line-height: 22px;
                    }
                }

                &.login_btn {
                    text-align: center;
                    line-height: 40px;
                }
            }
        }
    }
}
</style>